<template>
  <div class="chart-container" :class="{ 'is-loading': loading }">
    <div class="chart-header" v-if="title || $slots.header">
      <slot name="header">
        <div class="chart-title">{{ title }}</div>
      </slot>
      <div class="chart-actions" v-if="$slots.actions">
        <slot name="actions"></slot>
      </div>
    </div>
    
    <div class="chart-content" ref="chartRef" :style="{ height: height }">
      <div v-if="loading" class="chart-loading">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
      <div v-else-if="isEmpty" class="chart-empty">
        <el-empty :description="emptyText" :image-size="80" />
      </div>
    </div>
    
    <div class="chart-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: '300px'
  },
  loading: {
    type: Boolean,
    default: false
  },
  isEmpty: {
    type: Boolean,
    default: false
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  options: {
    type: Object,
    default: () => ({})
  },
  autoResize: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['chart-ready', 'chart-click', 'chart-resize'])

const chartRef = ref(null)
let chartInstance = null

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(props.options)
  
  // 绑定事件
  chartInstance.on('click', (params) => {
    emit('chart-click', params)
  })
  
  emit('chart-ready', chartInstance)
}

// 更新图表
const updateChart = (options) => {
  if (chartInstance) {
    chartInstance.setOption(options)
  }
}

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
    emit('chart-resize')
  }
}

// 销毁图表
const disposeChart = () => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
}

// 监听选项变化
watch(
  () => props.options,
  (newOptions) => {
    if (chartInstance && !props.loading && !props.isEmpty) {
      updateChart(newOptions)
    }
  },
  { deep: true }
)

// 监听加载状态变化
watch(
  () => props.loading,
  (newLoading) => {
    if (!newLoading && !props.isEmpty && chartRef.value) {
      if (!chartInstance) {
        initChart()
      } else {
        updateChart(props.options)
      }
    }
  }
)

// 监听空状态变化
watch(
  () => props.isEmpty,
  (newEmpty) => {
    if (!newEmpty && !props.loading && chartRef.value) {
      if (!chartInstance) {
        initChart()
      } else {
        updateChart(props.options)
      }
    }
  }
)

// 暴露方法给父组件
defineExpose({
  getInstance: () => chartInstance,
  resize: resizeChart,
  update: updateChart,
  dispose: disposeChart
})

onMounted(() => {
  if (!props.loading && !props.isEmpty) {
    initChart()
  }
  
  if (props.autoResize) {
    window.addEventListener('resize', resizeChart)
  }
})

onUnmounted(() => {
  disposeChart()
  
  if (props.autoResize) {
    window.removeEventListener('resize', resizeChart)
  }
})
</script>

<style lang="scss" scoped>
.chart-container {
  background: var(--el-bg-color-overlay);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-lighter);
  overflow: hidden;
  transition: var(--el-transition-all);
  
  &.is-loading {
    opacity: 0.8;
  }
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .chart-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
    
    .chart-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .chart-content {
    position: relative;
    
    .chart-loading {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.7);
      color: var(--el-text-color-secondary);
      
      .el-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
    
    .chart-empty {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .chart-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--el-border-color-lighter);
    font-size: 12px;
    color: var(--el-text-color-secondary);
    text-align: center;
  }
}
</style>